<script setup lang="ts">

import Index_small_title from "../components/common/IndexSmallTitle.vue";
import RankItem from "../components/common/RankItem.vue";
import {type RankDatas} from "../types/rank";
import IndexTopData from "../components/IndexTopData.vue";
import IndexTargetProgress from "../components/IndexTargetProgress.vue";
import YearTrainSituation from "../components/YearTrainSituation.vue";
import WeaknessAnalysis from "../components/WeaknessAnalysis.vue";
import IndexTrainingTrends from "../components/IndexTrainingTrends.vue";

const listArray:RankDatas=[{
  headUrl: 'https://img2.baidu.com/it/u=3227619927,365499885&fm=253&fmt=auto&app=120&f=JPEG?w=938&h=500',
  rank: 0,
  level: 1,
  learnTime: '222',
  name: '列车调度员',
},
  {
    headUrl: 'https://img0.baidu.com/it/u=256816879,771155532&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800',
    rank: 1,
    level: 2,
    learnTime: '222',
    name: '列车调度员',
  },
  {
    headUrl: 'https://img2.baidu.com/it/u=3227619927,365499885&fm=253&fmt=auto&app=120&f=JPEG?w=938&h=500',
    rank: 2,
    level: 3,
    learnTime: '222',
    name: '机车调度员',
  },
  {
    headUrl: 'https://img0.baidu.com/it/u=256816879,771155532&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800',
    rank: 3,
    level: 4,
    learnTime: '222',
    name: '机车调度员',
  },
  {
    headUrl: 'https://img0.baidu.com/it/u=256816879,771155532&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800',
    rank: 4,
    level: 5,
    learnTime: '222',
    name: '值班站长',
  },
  {
    headUrl: 'https://img0.baidu.com/it/u=256816879,771155532&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800',
    rank: 5,
    level: 6,
    learnTime: '222',
    name: '值班站长',
  },
  {
    headUrl: 'https://img0.baidu.com/it/u=256816879,771155532&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800',
    rank: 6,
    level: 7,
    learnTime: '222',
    name: '安全员',
  },
  {
    headUrl: 'https://img2.baidu.com/it/u=3227619927,365499885&fm=253&fmt=auto&app=120&f=JPEG?w=938&h=500',
    rank: 7,
    level: 8,
    learnTime: '222',
    name: '安全员',
  }
];

</script>

<template>
  <div>
    <el-container>
      <el-main class="body">
        <IndexTopData class="head_style"></IndexTopData>
        <IndexTargetProgress class="index_target_progress_style"  :style="{ marginTop: '20px' }"></IndexTargetProgress>
        <YearTrainSituation class="year_train_situation_style"></YearTrainSituation>
        <IndexTrainingTrends class="index_training_trends_style"></IndexTrainingTrends>
      </el-main>
      <el-aside width="300px" class="el-aside_style">
        <div class="right_layout_style">
        <Index_small_title title="西安局全局学习排行榜"/>
        <RankItem :datalist="listArray"/>
        </div>
        <div class="right_layout_body_style">
        <WeaknessAnalysis></WeaknessAnalysis>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>
<!---background: #F6FBFF--->
<style scoped>
.right_layout_body_style{
  background-color: #FFFFFF;
  border-radius: 6px;
  padding: 15px 15px;
  border: 1px solid rgba(0,0,0,0.1);
  margin-top: 20px;
}
.right_layout_style{
  background-color: #FFFFFF;
  border-radius: 6px;
  padding: 15px 15px;
  border: 1px solid rgba(0,0,0,0.1);
}

.el-aside_style{
  margin-top: 20px;
  margin-right: 15px;
}
.index_training_trends_style{
  margin-left: 15px;
  margin-right: 20px;
}
.year_train_situation_style{
  margin-top: 20px;
  margin-left: 15px;
  margin-right: 20px;
  width:calc(100vw - 420px);/* 原始宽度减去 30px 的间距 */
}
.index_target_progress_style{
  margin-left: 15px;
  margin-right: 20px;
  width:calc(100vw - 420px);/* 原始宽度减去 30px 的间距 */
}
.head_style{
  margin-top: 20px;
  margin-left: 15px;
  width:calc(100vw - 420px);/* 原始宽度减去 30px 的间距 */
}
.body{
  top:0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}
</style>